//地图容器
var chart = echarts.init(document.getElementById('main'));
//34个省、市、自治区的名字拼音映射数组

var provinces = {
    //23个省
    "台湾": "taiwan",
    "河北": "hebei",
    "山西": "shanxi",
    "辽宁": "liaoning",
    "吉林": "jilin",
    "黑龙江": "heilongjiang",
    "江苏": "jiangsu",
    "浙江": "zhejiang",
    "安徽": "anhui",
    "福建": "fujian",
    "江西": "jiangxi",
    "山东": "shandong",
    "河南": "henan",
    "湖北": "hubei",
    "湖南": "hunan",
    "广东": "guangdong",
    "海南": "hainan",
    "四川": "sichuan",
    "贵州": "guizhou",
    "云南": "yunnan",
    "陕西": "shanxi1",
    "甘肃": "gansu",
    "青海": "qinghai",
    //5个自治区
    "新疆": "xinjiang",
    "广西": "guangxi",
    "内蒙古": "neimenggu",
    "宁夏": "ningxia",
    "西藏": "xizang",
    //4个直辖市
    "北京": "beijing",
    "天津": "tianjin",
    "上海": "shanghai",
    "重庆": "chongqing",
    //2个特别行政区
    "香港": "xianggang",
    "澳门": "aomen"
};
//直辖市和特别行政区-只有二级地图，没有三级地图
var special = ["北京", "天津", "上海", "重庆", "香港", "澳门"];

var mapdata = [];

$.getJSON('static/map/province/hubei.json', function(data) {
    console.log(data)
    echarts.registerMap("湖北", data);
    var renderMapData = {
        data: [],
        convertData: []
    }
    for (var i = 0; i < data.features.length; i++) {
        renderMapData.data.push({
            name: data.features[i].properties.name
        })
    }
    $.each(data.features, function(i, v) {
        var randomNum = parseInt(Math.random() * 800 + 300)
        renderMapData.convertData.push({
            name: v.properties.name,
            value: v.properties.cp.concat(randomNum)
        })
    })
    mapdata = renderMapData
    renderMap("湖北", renderMapData);
});
//地图点击事件
chart.on('click', function(params) {
    console.log(params);
    if (params.name in provinces) {
        //如果点击的是34个省、市、自治区，绘制选中地区的二级地图
        $.getJSON('static/map/province/' + provinces[params.name] + '.json', function(data) {
            echarts.registerMap(params.name, data);
            var d = {
                data: [],
                convertData: []
            }
            for (var i = 0; i < data.features.length; i++) {
                d.push({
                    name: data.features[i].properties.name
                })
            }
            $.each(data.features, function(i, v) {
                var randomNum = parseInt(Math.random() * 80 + 30)
                d.convertData.push({
                    name: v.properties.name,
                    value: v.geometry.coordinates[0][0][2].concat(randomNum)
                })
            })
            renderMap(params.name, d);
        });
    } else if (params.seriesName in provinces) {
        //如果是【直辖市/特别行政区】只有二级下钻
        if (special.indexOf(params.seriesName) >= 0) {
            renderMap('湖北', mapdata);
        } else {
            //显示县级地图
            $.getJSON('static/map/city/' + cityMap[params.name] + '.json', function(data) {
                echarts.registerMap(params.name, data);
                var d = {
                    data: [],
                    convertData: []
                }

                $.each(data.features, function(i, v) {
                    d.data.push({
                        name: data.features[i].properties.name
                    })
                    var randomNum = parseInt(Math.random() * 80 + 30)
                    d.convertData.push({
                        name: v.properties.name,
                        value: v.geometry.coordinates[0][0][2].concat(randomNum)
                    })
                })
                renderMap(params.name, d);
            });
        }
    } else {
        renderMap('湖北', mapdata);
    }
});
//初始化绘制全国地图配置
var option = {
    backgroundColor: 'rgba(255,0,0,.8)', //背景颜色
    title: { //标题设置
        text: '实时上报数据 ',
        subtext: '三级下钻',
        link: 'https://www.baidu.com', //连接
        left: 'center', //位置
        textStyle: {
            color: '#fff',
            fontSize: 16,
            fontWeight: 'normal',
            fontFamily: "Microsoft YaHei"
        },
        subtextStyle: {
            color: 'yellow', //副标题颜色
            fontSize: 13,
            fontWeight: 'normal',
            fontFamily: "Microsoft YaHei"
        }
    },
    geo: { //地理坐标系组件
        map: '湖北',
        label: {
            emphasis: {
                show: true
            }
        },
        itemStyle: {
            normal: {
                areaColor: '#323c48',
                borderColor: '#111'
            },
            emphasis: {
                areaColor: '#2a333d'
            }
        }
    },
    tooltip: { //提示的配置
        trigger: 'item',
        formatter: '{b}', //数据

    },
    toolbox: { //工具栏
        show: true,
        orient: 'vertical',
        left: 'right',
        top: 'center',
        feature: {
            dataView: {
                readOnly: false
            },
            restore: {},
            saveAsImage: {},
        },
        iconStyle: {
            normal: {
                color: '#fff'
            }
        }
    },
    grid: {
        right: 20,
        top: 50,
        bottom: 40,
        width: '25%'
    },
    xAxis: {
        type: 'value',
        scale: true,
        position: 'top',
        boundaryGap: false,
        splitLine: {
            show: false
        },
        axisLine: {
            show: false
        },
        axisTick: {
            show: false
        },
        axisLabel: {
            margin: 2,
            textStyle: {
                color: '#aaa'
            }
        },
    },
    yAxis: {
        type: 'category',
        name: 'TOP 20',
        nameGap: 16,
        axisLine: { //坐标轴轴线相关设置
            show: false,
            lineStyle: {
                color: '#ddd'
            }
        },
        axisTick: {
            show: false,
            lineStyle: {
                color: '#ddd'
            }
        },
        axisLabel: { //坐标轴刻度标签的显示间隔
            interval: 1,
            textStyle: {
                color: '#ddd'
            },
        },
        data: []
    },
    animationDuration: 1000, //初始动画的时长
    animationEasing: 'quarticIn', //动画效果
    animationDurationUpdate: 1500, //数据更新动画的时长
};

function renderMap(map, objData) {
    option.title.subtext = map;
    console.log(map)
    var categoryData = [];
    var barData = [];
    var selectedItems = objData.convertData;
    var count = 0;
    var sum = 0;
    selectedItems.sort(function(a, b) {
        return a.value[2] - b.value[2];
    });
    $.each(selectedItems, function(i, v) {
        console.log(v)
        categoryData.push(v.name);
        barData.push(v.value[2]);
    })
    option.geo = {
            map: map,
            left: 10,
            label: {
                emphasis: {
                    show: false
                }
            },
            itemStyle: {
                normal: {
                    areaColor: '#323c48',
                    borderColor: '#111'
                },
                emphasis: {
                    areaColor: '#2a333d'
                }
            }
        },
        option.series = [{
            name: map,
            type: 'map',
            mapType: map,
            roam: false,
            zlevel: 1,
            left: 10,
            nameMap: {
                'china': '中国'
            },
            label: {
                normal: {
                    show: true,
                    textStyle: {
                        color: '#999',
                        fontSize: 13
                    }
                },
                emphasis: {
                    show: true,
                    textStyle: {
                        color: '#fff',
                        fontSize: 13
                    }
                }
            },
            itemStyle: {
                normal: {
                    areaColor: '#323c48',
                    borderColor: 'dodgerblue'
                },
                emphasis: {
                    areaColor: 'darkorange'
                }
            },
            data: objData.data
        }, {
            name: 'pm2.5',
            type: 'scatter',
            coordinateSystem: 'geo',
            data: objData.convertData,
            zlevel: 3,
            symbolSize: function(v) {
                return 32;
            },
            label: {
                normal: {
                    show: true,
                    align: "center",
                    verticalAlign: "middle",
                    fontSize: 10
                },
                emphasis: {
                    show: true
                }
            },
            itemStyle: {
                normal: {
                    color: "red"
                },
                emphasis: {
                    borderColor: '#fff',
                    borderWidth: 1
                }
            }
        }, {
            id: 'bar',
            zlevel: 2,
            type: 'bar',
            symbol: 'none',
            tooltip: {
                trigger: 'item',
                formatter: '{b}:{c}'
            },
            itemStyle: {
                normal: {
                    color: '#ddb926'
                }
            },
            data: barData
        }];

    console.log(categoryData)
    console.log(barData)

    option.yAxis = {
            type: 'category',
            name: 'TOP 20',
            nameGap: 16,
            axisLine: {
                show: false,
                lineStyle: {
                    color: '#ddd'
                }
            },
            axisTick: {
                show: false,
                lineStyle: {
                    color: '#ddd'
                }
            },
            axisLabel: {
                interval: 0,
                textStyle: {
                    color: '#ddd'
                }
            },
            data: categoryData
        },
        option.xAxis = {

            type: 'value',
            scale: true,
            position: 'top',
            boundaryGap: false,
            splitLine: {
                show: false
            },
            axisLine: {
                show: false
            },
            axisTick: {
                show: false
            },
            axisLabel: {
                margin: 2,
                textStyle: {
                    color: '#aaa'
                }
            },
        },


        console.log(option)
        //渲染地图
    chart.setOption(option);
}